<template>
  <div class="home">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      style="background-color: #1074ff"
      title="疫苗预约"
      @click-left="$router.go(-1)"
      left-arrow
    />

    <!-- 背景图片 -->
    <div class="img"></div>
    <!-- 展示卡片 -->
    <div class="intro">
      <div class="showcard">
        <div class="title-wrap">
          <div class="title">{{ titlelist.title }}</div>
        </div>
        <div class="content">{{ titlelist.introduction }}</div>
      </div>
    </div>

    <!-- 疫苗研发进度 -->
    <div class="progress">国际疫苗研发进度</div>
    <div class="source">
      <div>数据来源：均为世卫组织公布或权威媒体公开报道可查询数据，</div>
      <div>本表仅统计进入临床II期以后疫苗进展。</div>
    </div>

    <!-- 分类图片 -->
    <div class="legend-img">
      <div class="type-rule"></div>
    </div>

    <!-- 研发进度表单 -->
    <div class="content-wrap">
      <div class="table-wrap">
        <table class="v-table">
          <tr class="header">
            <th class="f-header">
              <div class="text"></div>
            </th>
            <th class="s-header">
              <div class="text-name">研发厂商/疫苗名称</div>
            </th>
            <th class="t-header">
              <div class="text-wrap">
                <div class="p1-title">
                  <div>临床</div>
                  <div>II期</div>
                </div>
                <div class="p2-title">
                  <div>临床</div>
                  <div>II/III期</div>
                </div>
                <div class="p3-title">
                  <div>临床</div>
                  <div>III期</div>
                </div>
                <div class="p4-title">上市</div>
                <div class="rule"></div>
              </div>
              <div class="v-line"></div>
            </th>
          </tr>

          <!-- 疫苗列表 -->
          <tr class="cell" v-for="(item, index) in tablelist" :key="index">
            <td>
              <img :src="item.devunit_flag_new" alt="" />
            </td>
            <td>
              <div class="acctext">{{ item.devunit }}</div>
              <div class="accname">{{ item.vaccine_name }}</div>
            </td>
            <td>
              <van-progress
                :color="compColor(item.vaccine_type)"
                :percentage="item.progress * 25"
                stroke-width="1.5vw"
                :show-pivot="false"
                track-color="#fff"
              />
            </td>
          </tr>
        </table>
      </div>
      <!-- 展示更多 -->
      <div class="open-wrap">
        <div class="open" @click="loadMore" v-if="isShow">展示更多</div>
        <div class="up-img" v-if="isShow"></div>
      </div>
    </div>

    <!-- 国家疫苗接种情况 -->
    <div class="msg-title">主要国家疫苗接种情况</div>
    <!-- 国家疫苗接种情况表单 -->
    <div class="msg-box">
      <div class="msgcard">
        <div class="msgtable-wrap">
          <table class="a-table">
            <tr class="a-top">
              <th class="firsttop">国家</th>
              <th class="secondtop">使用疫苗情况</th>
            </tr>
            <tr
              class="row-cell"
              v-for="(item, index) in countrylist"
              :key="index"
            >
              <td class="left-roll">
                <div class="country">
                  <img :src="item.flag" alt="" />
                  <div class="cou-name">{{ item.country }}</div>
                </div>
              </td>
              <td class="right-roll">
                <div
                  class="list-item"
                  v-for="(i, index) in item.arr"
                  :key="index"
                >
                  <!-- <div class="circle"></div> -->
                  <div class="msg-content">
                    {{ i }}
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titlelist: [],
      tablelist: [],
      tablelist2: [],
      countrylist: [],
      isShow: true,
    };
  },
  computed: {
    compColor() {
      return function (value) {
        if (value == 1) {
          return "#f06061";
        } else if (value == 2) {
          return "#0055ee";
        } else if (value == 3) {
          return "#2fc07f";
        } else {
          return "#e8b800";
        }
      };
    },
  },
  mounted() {
    let url =
      "/vaccine/cache/wuji_public/object?appid=yimiao&schemaid=vaccine_progress_introduction&schemakey=4f1b1600bfd14d3cbecb13f43e96b3cf";
    this.axios.get(url).then((res) => {
      this.titlelist = res.data.data[0];
    });

    let urllist =
      "/vaccine/cache/wuji_public/object?appid=yimiao&schemaid=vaccine_progress_foreign&schemakey=1091e06cbb704b40963accd816770461&size=500&sort=rank&order=asc";
    this.axios.get(urllist).then((res) => {
      // console.log(res);
      this.tablelist2 = res.data.data;
      this.tablelist2.forEach((item, index) => {
        if (index < 7) {
          this.tablelist.push(item);
        }
      });
      // this.tablelist = res.data.data;
    });

    let urltable =
      "/vaccine/cache/wuji_public/object?appid=yimiao&schemaid=vaccination_done&schemakey=42b3b7ffcac0460ca0e239214b3ddcaa&sort=rank&order=asc";
    this.axios.get(urltable).then((res) => {
      // console.log(res);
      this.countrylist = res.data.data;
      for (const i in this.countrylist) {
        let arr = this.countrylist[i].content.split("\\n");
        this.countrylist[i].arr = arr;
      }
    });
  },
  methods: {
    loadMore() {
      this.tablelist = this.tablelist2;
      this.isShow = false;
    },
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #1074ff !important;
  /deep/ .van-nav-bar__title {
    color: #fff;
  }
  /deep/ .van-icon-arrow-left {
    color: #fff;
  }
}
.img {
  position: relative;
  width: 100%;
  height: 41.6vw;
  background: url(/ym_bg.png) no-repeat center;
  background-size: 100%, 100%;
}
.home {
  width: 100vw;
  overflow: auto;
  font-weight: 400;
  background-color: #fff;
  padding-bottom: 18.667vw;
}
.intro {
  position: relative;
  margin-top: -9.333vw;
}
.showcard {
  width: 80vw;
  box-shadow: 0 0.8vw 1.6vw 0 rgb(208, 223, 243);
  border-radius: 2.133vw;
  padding: 3.467vw 3.467vw 4vw;
  background-color: #fff;
  margin: auto;
}
.title-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.title {
  font-weight: 700;
  font-size: 4.267vw;
  color: #141414;
}
.content {
  font-weight: 400;
  font-size: 3.2vw;
  color: #737373;
  margin-top: 1.067vw;
}
.progress {
  padding-top: 6.133vw;
  padding-bottom: 1.333vw;
  font-weight: 700;
  font-size: 4.267vw;
  color: #222;
  line-height: 3.733vw;
  padding-left: 5.333vw;
  padding-right: 5.333vw;
}
.source {
  font-size: 2.667vw;
  color: #a6a6a6;
  letter-spacing: 0;
  line-height: 4.267vw;
  padding: 0 5.333vw 2.667vw;
}
.legend-img {
  position: relative;
  width: 81.6vw;
  height: 3.333vw;
  background: url(/legendn.png);
  background-size: 100% 100%;
  margin: 0 5.333vw 2.667vw;
}
.type-rule {
  position: absolute;
  right: -1.333vw;
  top: -1.333vw;
  width: 5.867vw;
  height: 5.867vw;
}
.content-wrap {
  user-select: none;
  padding-bottom: 5.6vw;
}
.table-wrap {
  position: relative;
  padding: 0 5.333vw;
}
.v-table {
  border-collapse: collapse;
  background-color: #fff;
  width: 100%;
}
.header {
  text-align: left;
  font-size: 2.667vw;
  color: #2570f1;
  line-height: 3.2vw;
  font-weight: 400;
  background-color: #eef5ff;
}
.f-header,
.s-header,
.t-header {
  padding-top: 1.867vw;
  padding-bottom: 1.867vw;
}
.text {
  left: 20vw;
}
.text-name {
  width: 32vw;
  text-align: left;
  font-weight: 400;
}
.text-wrap {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  font-weight: 400;
}
.p1-title,
.p2-title,
.p3-title {
  width: 11.333vw;
}
.p4-title {
  text-align: left;
  width: 11.067vw;
  padding-left: 1.333vw;
}
.rule {
  position: absolute;
  right: 1vw;
  width: 3.2vw;
  height: 3.2vw;
  background: url(/ruleiconn.png);
  background-size: 100% 100%;
}
.v-line {
  left: 1px;
}
.cell {
  text-align: left;
  width: 100%;
  background-color: #fff;
}
.cell td {
  padding-top: 2.667vw;
  padding-bottom: 2.667vw;
  width: 32.4vw;
  font-weight: 400;
  font-size: 3.2vw;
  color: #222;
  line-height: 3.467vw;
}
.cell td > img {
  width: 6.133vw;
  height: 6.133vw;
  margin-left: 1.333vw;
}
.acctext {
  width: 29.067vw;
}
.accname {
  font-weight: 400;
  font-size: 2.4vw;
  color: #a6a6a6;
  line-height: 2.4vw;
  padding-top: 0.533vw;
  width: 29.067vw;
}
.open-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4.533vw 0 0;
}
.open {
  margin-right: 1.333vw;
  font-size: 3.2vw;
  color: #222;
  line-height: 3.733vw;
}
.up-img {
  background: url(/arrow-down.png);
  width: 2.933vw;
  height: 1.733vw;
  background-size: 100% 100%;
}
.msg-title {
  font-weight: 700;
  font-size: 4.267vw;
  color: #222;
  line-height: 3.733vw;
  padding-left: 5.333vw;
  padding-right: 5.333vw;
}
.msg-box {
  font-weight: 400;
}
.msgcard {
  padding: 2.933vw 5.333vw 0;
  background-color: #fff;
}
.msgtable-wrap {
  position: relative;
  border: 0.267vw solid #f8fbff;
}
.a-table {
  border-collapse: collapse;
  background-color: #fff;
}
.a-top {
  text-align: center;
  font-size: 3.2vw;
  color: #2869ee;
  line-height: 3.733vw;
  font-weight: 400 !important;
  background-color: #eef5ff;
}
.a-top > th {
  font-weight: 400;
}
.firsttop {
  width: 12.933vw;
  padding-top: 2.133vw;
  padding-bottom: 2.133vw;
  font-weight: 400;
}
.secondtop {
  width: 80vw;
  padding-top: 2.133vw;
  padding-bottom: 2.133vw;
  font-weight: 400;
}
.row-cell {
  background-color: #fff;
  padding-top: 1.6vw;
  padding-bottom: 1.6vw;
}
.left-roll {
  padding-top: 2.133vw;
  padding-bottom: 2.133vw;
  position: relative;
  width: 12.933vw;
  font-weight: 700;
  font-size: 3.2vw;
  color: #000;
  line-height: 3.733vw;
}
.country .list-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.country > img {
  width: 3.2vw;
  height: 3.2vw;
  border-radius: 100%;
}
.cou-name {
  font-size: 3.2vw;
  color: #222;
  line-height: 3.733vw;
  font-weight: 700;
  margin-top: 1.067vw;
}
.right-roll {
  padding-top: 2.133vw vw;
  padding-bottom: 2.133vw;
  width: 76.4vw;
  font-size: 2.933vw;
  color: #222;
  line-height: 5.333vw;
  padding: 3.733vw 2.933vw 3.733vw 3.067vw;
}
// .circle {
//   width: 1.067vw;
//   height: 1.067vw;
//   background: #498dff;
//   border-radius: 100%;
//   margin-top: 1.333vw;
//   flex-shrink: 0;
//   margin-right: 2.4vw;
// }
.msg-content {
  font-size: 2.933vw;
  color: #222;
  letter-spacing: 0;
  text-align: justify;
  line-height: 3.733vw;
  margin-bottom: 0.4vw;
  position: relative;
  &::before {
    position: absolute;
    content: "";
    width: 1.067vw;
    height: 1.067vw;
    border-radius: 50%;
    background-color: #498dff;
    left: -2vw;
    top: 1vw;
  }
}
</style>